<!-- The ref attr used to find the swiper instance -->
<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper" :not-next-tick="notNextTick" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="item of list" :key="item.id"
        ><img
          class="swiper-img"
          :src="item.imgUrl"
        /></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
  
<script>
// swiper options example:
export default {
  name: "HomeSwiper",
  props:{
    list:Array
  },
  data() {
    return {
      // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
      notNextTick: true,
      swiperOption: {
        // 这个配置项用来添加轮播图下面的小圆点
        pagination: '.swiper-pagination',
        loop:true,
        paginationClickable: true,
      },
      
    };
  },
  computed:{
    showSwiper(){
      return this.list.length
    }
  }
};
</script>
<style lang="stylus" scoped>
    // >>>用来穿透，这样这个css样式就不手scoped控制了，可以穿透到swiper组件中
    .wrapper >>> .swiper-pagination-bullet-active
        background-color: #fff !important
    .wrapper >>> .swiper-pagination
        // top:31.25%
    .wrapper
        width: 100%
        height: 0
        overflow hidden
        // 盒子的高度是它父元素宽度的31.25%,这样是自适应的
        padding-bottom: 31.25% 
        background-color: #eee
        .swiper-img 
            width: 100%;

</style>